<template>
	<div>
	    <SuperTable
	    	ref="table"
	    	path="API_GOODS_CONSULT_LISTS"
	    	:params="params"
	    	:columns="columns"
	    	@on-selection-change="handleChangeSelection"
	    >
	    	<Form slot="header-right" :model="filterForm" inline @submit.native.prevent>
                <FormItem label="关键词">
                    <Input v-model="filterForm.keywords" placeholder="请输入产品名称搜索" suffix="ios-search" clearable style="width: 240px"></Input>
                </FormItem>
                <Button type="primary" @click="handleSearch">筛选</Button>
	    	</Form>
	    	
	    	<div slot="page-left">
	    		<Poptip title="是否确认删除选中的所有咨询？" :width="220" placement="top" confirm transfer style="text-align: center;" @on-ok="handleBatchDelete">
	        		<Button :loading="batchDeleteStatus">删除</Button>
	        	</Poptip>
	    		<Button :loading="batchUnShowStatus" @click="handleBatchUnShow">批量禁止显示</Button>
	    	</div>
	    	
	    	<div class="ui-table-cell ui-flex" slot-scope="{ row }" slot="goods">
	    		<ImageCell :src="row.sku.thumb"></ImageCell>
	            <div class="ui-flex-full" style="margin-left: 10px;">
	            	<p class="ui-ellipsis2">{{ row.sku.sku_name }}</p>
	            	<p class="ui-ellipsis ui-text-primary">{{ handleGetSpecTexts(row.sku.spec)}}</p>
	            </div>
	        </div>
	        <div class="ui-table-cell ui-flex" slot-scope="{ row }" slot="user">
	    		<ImageCell :src="row.avatar"></ImageCell>
	            <div class="ui-flex-full" style="margin-left: 10px;">
	            	<p class="ui-ellipsis2">用户名：{{ row.member ? row.member.username : '--' }}</p>
	            	<p class="ui-ellipsis">手机：{{ row.member ? row.member.mobile : '--' }}</p>
	            </div>
	        </div>
	        <div class="ui-table-cell" slot-scope="{ row }" slot="status">
        		<p class="ui-table-cell-line ui-ellipsis">回复：{{ row.reply_text }}</p>
            	<p class="ui-table-cell-line ui-ellipsis">状态：{{ row.see == -1 ? '隐藏' : '显示' }}</p>
	        </div>
	        <div slot-scope="{ row }" slot="action">
	        	<Button type="warning" size="small" @click="handleShowConsult(row)">查看咨询</Button>
	        	<Button type="primary" size="small" @click="handleSwitchShow(row)">{{ row.see == -1 ? '允许显示' : '禁止显示' }}</Button>
	        	<Poptip title="是否确认删除此咨询？" :width="190" placement="left" confirm transfer style="text-align: center;" @on-ok="handleDelete(row.id)">
	        		<Button type="error" size="small">删除</Button>
	        	</Poptip>
	        </div>
	    </SuperTable>
	    <DrawerForm v-model="showModal" title="咨询内容">
	    	<div class="ui-flex dg-consult-goods">
	    		<ImageCell :src="currentItem.sku.thumb"></ImageCell>
	            <div class="ui-flex-full" style="margin-left: 10px; line-height: 20px;">
	            	<p class="ui-ellipsis2" style="height: 40px;">{{ currentItem.sku.sku_name }}</p>
	            	<p class="ui-ellipsis ui-text-primary">{{ handleGetSpecTexts(currentItem.sku.spec)}}</p>
	            </div>
	    	</div>
	    	<div class="dg-consult-content">
	    		<p>{{ currentItem.question }}</p>
	    	</div>
	    	<div v-if="currentItem.reply_time" class="dg-reply-content">
	    		<p>已回复：</p>
	    		<p style="color: #e4393c;">{{ currentItem.reply_content }}</p>
	    	</div>
	    	<template v-else>
	    		<Input type="textarea" v-model="replyContent" :rows="5" placeholder="请输入回复内容" />
	    	</template>
	    	<div slot="footer">
	    		<Button @click="showModal = false">{{ currentItem.reply_time ? '关闭' : '取消'}}</Button>
            	<Button v-if="!currentItem.reply_time" type="primary" :loading="commiting" style="margin-left: 8px" @click="handleSubmit">确认回复</Button>
	    	</div>
	    </DrawerForm>
	</div>
</template>

<script>
import Util from '@/libs/util.js';
import SuperTable from '@/components/SuperTable.vue';
import ImageCell from '@/components/ImageCell/index.vue';
import DrawerForm from '@/components/DrawerForm.vue';
export default {
	name: 'goodsList',
	components: {
		SuperTable,
		ImageCell,
		DrawerForm
	},
	data() {
		return {
			ids: [],
			showModal: false,
			commiting: false,
			batchDeleteStatus: false,
			batchUnShowStatus: false,
			replyContent: '',
			currentItem: {
				sku: {}
			},
			filterForm: {
				keywords: ''
			},
			params: {
				keywords: '',
				page: 1,
				limit: 10,
				relations: ['sku', 'member']
			},
			columns: [
				{
                    type: 'selection',
                    width: 54,
                    align: 'center'
                },
                {
                    title: '咨询商品',
                    slot: 'goods',
                    minWidth: 300
                },
                {
                    title: '咨询用户',
                    slot: 'user',
                    minWidth: 210,
                    maxWidth: 320
                },
                {
                    title: '咨询时间',
                    key: 'dateline',
                    minWidth: 177,
                    maxWidth: 240,
                    render: (h, params) => {
                    	return h('span', '时间：' + params.row.dateline);
                    }
                },
                {
                    title: '状态',
                    slot: 'status',
                    minWidth: 110,
                    maxWidth: 150
                },
                {
                    title: '操作',
                    slot: 'action',
                    align: "center",
                    width: 215
                },
			]
		}
	},
	mounted() {
		
	},
	methods: {
		// 显示咨询内容
		handleShowConsult(item) {
			this.currentItem = item;
			this.replyContent = '';
			this.showModal = true;
		},
		// 获取规格文本
		handleGetSpecTexts(arr) {
			if(!arr) return '';
			let results = [];
			if(Array.isArray(arr)) {
				results = arr.map(item => {
					return item.name +':'+ item.value;
				})
			}else{
				results.push(arr.name +':'+ arr.value);
			}
			return results.join(',')
		},
		// 搜索
		handleSearch() {
			this.params.keywords = this.filterForm.keywords;
			this.params.page = 1;
		},
		// 控制是否显示
		handleSwitchShow(item) {
			let params = {
				id: item.id,
				see: item.see == 1 ? -1 : 1
			}
			Util.ajax.post(this.API['API_GOODS_CONSULT_SHOW'], params).then(res => {
				this.$Message.success('操作成功');
				item.see = res.see;
			}).catch(() => {
				
			})
		},
		// 删除咨询
		handleDelete(id) {
			Util.ajax.post(this.API['API_GOODS_CONSULT_DESTORY'], {id: id}).then(res => {
				this.$Message.success('删除成功');
				this.$refs.table.init();
			}).catch(() => {
				
			})
		},
		// 表格选中触发事件
		handleChangeSelection(selection) {
			this.ids = selection.map(item => {
				return item.id;
			})
		},
		// 批量删除
		handleBatchDelete() {
			if(this.ids.length == 0) {
				this.$Message.error('请至少选择一条数据');
				return false;
			}
			if(this.batchDeleteStatus) return false;
			this.batchDeleteStatus = true;
			Util.ajax.post('/v1/goods.goods_consult/batch_destroy', {ids: this.ids}).then(res => {
				this.batchDeleteStatus = false;
				this.$Message.success('删除成功');
				this.$refs.table.init();
			}).catch(() => {
				this.batchDeleteStatus = false;
			})
		},
		// 批量禁止显示
		handleBatchUnShow() {
			if(this.ids.length == 0) {
				this.$Message.error('请至少选择一条数据');
				return false;
			}
			if(this.batchUnShowStatus) return false;
			this.batchUnShowStatus = true;
			Util.ajax.post(this.API['API_GOODS_CONSULT_BATCH_SHOW'], {ids: this.ids, see: -1}).then(res => {
				this.batchUnShowStatus = false;
				this.$Message.success('操作成功');
				this.$refs.table.init();
			}).catch(() => {
				this.batchUnShowStatus = false;
			})
		},
		// 提交回复
		handleSubmit() {
			if(!this.replyContent) {
				this.$Message.error('请输入回复内容');
				return false;
			}
			let params = {
				id: this.currentItem.id,
				reply_content: this.replyContent
			}
			this.commiting = true;
			Util.ajax.post(this.API['API_GOODS_CONSULT_REPLY'], params).then((res) => {
				this.commiting = false;
				this.currentItem.reply_content = res.reply_content;
				this.currentItem.reply_text = res.reply_text;
				this.currentItem.reply_time = res.reply_time;
			}).catch(() => {
				this.commiting = false;
			})
		}
	}
}
</script>

<style>
.dg-consult-goods {
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px dashed #dedede;
}
.dg-consult-content {
	margin-bottom: 16px;
	line-height: 20px;
	font-size: 13px;
	color: #000;
}
.dg-consult-content .label {
	color: #999;
	font-size: 12px;
}
.dg-reply-content {
	margin-top: 15px;
	color: #666;
}
</style>